import React, { PureComponent } from 'react';
import * as echarts from 'echarts';

class DailyTransactionBar extends PureComponent {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.chart = null;
  }

  componentDidMount() {
    console.log('每日交易量条形图组件已加载');
    
    try {
      this.initChart();
      this.updateChart();
      
      // 监听窗口大小变化
      window.addEventListener('resize', this.handleResize);
    } catch (error) {
      console.error('交易量图表初始化失败:', error);
    }
  }

  componentDidUpdate(prevProps) {
    try {
      if (JSON.stringify(prevProps.data) !== JSON.stringify(this.props.data)) {
        this.updateChart();
        console.log('交易量图表数据已更新');
      }
    } catch (error) {
      console.error('交易量图表更新失败:', error);
    }
  }

  componentWillUnmount() {
    try {
      if (this.chart) {
        this.chart.dispose();
      }
      window.removeEventListener('resize', this.handleResize);
    } catch (error) {
      console.error('交易量图表销毁失败:', error);
    }
  }

  // 初始化图表
  initChart = () => {
    if (!this.chartRef.current) return;
    
    this.chart = echarts.init(this.chartRef.current);
  }

  // 更新图表
  updateChart = () => {
    if (!this.chart || !this.props.data) return;

    const { categories, series } = this.props.data;
    const data = series[0];

    const option = {
      backgroundColor: 'transparent',
      grid: {
        top: '10%',
        left: '10%',
        right: '10%',
        bottom: '15%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00ffff',
        borderWidth: 1,
        textStyle: {
          color: '#fff',
          fontSize: 12
        },
        formatter: function(params) {
          return `${params[0].name}<br/>交易量: ${params[0].value}%`;
        }
      },
      xAxis: {
        type: 'category',
        data: categories,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.8)',
          fontSize: 11,
          margin: 8
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.1)',
            type: 'dashed'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.6)',
          fontSize: 10,
          formatter: '{value}%'
        }
      },
      series: [
        {
          name: '交易量',
          type: 'bar',
          data: data.data.map((value, index) => ({
            value: value,
            itemStyle: {
              color: data.colors[index] || '#00ffff',
              borderRadius: [2, 2, 0, 0],
              shadowColor: data.colors[index] || '#00ffff',
              shadowBlur: 8,
              shadowOffsetY: 2
            }
          })),
          barWidth: '60%',
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowColor: '#fff',
              shadowBlur: 15,
              shadowOffsetY: 3
            }
          },
          animationDelay: function (idx) {
            return idx * 100;
          }
        }
      ],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 50;
      }
    };

    this.chart.setOption(option, true);
  }

  // 处理窗口大小变化
  handleResize = () => {
    if (this.chart) {
      this.chart.resize();
    }
  }

  render() {
    return (
      <div 
        ref={this.chartRef} 
        style={{ 
          width: '100%', 
          height: '100%', 
          minHeight: '200px' 
        }} 
      />
    );
  }
}

export default DailyTransactionBar; 